<template>
  <div>
    <mark
      style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
      v-show="showSeason"
      @click.stop="showSeason=false"
    ></mark>
    <el-input :placeholder="placeholder" :disabled ="disabled" :clearable="!disabled" v-model="showValue" class="yt-time-quarter" @focus="showSeason=true">
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-card
      class="box-card"
      style="width:322px;padding: 0 3px 20px;margin-top:10px;position:absolute;z-index:9999"
      v-show="showSeason"
    >
      <div slot="header" class="clearfix" style="text-align:center;padding:0">
        <button
          type="button"
          aria-label="前一年"
          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
          @click="prev"
        ></button>
        <span role="button" class="el-date-picker__header-label">{{year}}年</span>
        <button
          type="button"
          aria-label="后一年"
          @click="next"
          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
        ></button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          size="medium"
          style="width:40%;color: #606266;float:left;"
          @click="selectSeason(0)"
        >Q1</el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(1)"
        >Q2</el-button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          size="medium"
          style="width:40%;color: #606266;float:left;"
          @click="selectSeason(2)"
        >Q3</el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(3)"
        >Q4</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
/**
 * @file:  View 组件 季节选择控件
 * @author: lw
 * @date: 2019-11-12
 * @description: UI组件  可选择季节
 * @api: valueArr : 季度value defalut['01-03', '04-06', '07-09', '10-12'] 默认值待设置
 */
export default {
  props: {
    valueArr: {
      default: () => ['01-03', '04-06', '07-09', '10-12'],
      type: Array
    },
    targetQuarterDate: {
      defalut: '',
      type: String
    },
    getValue: {
      // eslint-disable-next-line no-empty-function
      default: () => {},
      type: Function
    },
    defaultValue: {
      default: '',
      type: String
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.choose')
      }
    }
  },
  data() {
    return {
      showSeason: false,
      season: '',
      year: new Date().getFullYear(),
      strYear: ''
    }
  },
  computed: {
    showValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  created() {
    if (this.defaultValue) {
      const value = this.defaultValue
      const arr = value.split('-')
      this.year = arr[0].slice(0, 4)
      const str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
      const arrAll = this.valueArr
      that.strYear = String(that.year).slice(2)
      this.showValue = `${this.strYear}'Q${arrAll.indexOf(str) + 1}`
    }
  },
  watch: {
    defaultValue(value) {
      const arr = value.split('-')
      this.year = arr[0].slice(0, 4)
      const str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
      const arrAll = this.valueArr
      that.strYear = String(that.year).slice(2)
      this.showValue = `${this.strYear}'Q${arrAll.indexOf(str) + 1}`
    }
  },
  methods: {
    one() {
      this.showSeason = false
    },
    prev() {
      this.year = this.year * 1 - 1
    },
    next() {
      this.year = this.year * 1 + 1
    },
    selectSeason(i) {
      const that = this
      that.season = i + 1
      const arr = that.valueArr[i].split('-')
      that.strYear = String(that.year).slice(2)
      that.getValue(that.year + arr[0] + '-' + that.year + arr[1])
      this.$emit('update:targetQuarterDate', that.year + '-' + arr[1] + '-01')
      that.showSeason = false
      this.showValue = `${this.strYear}'Q${this.season}`
    }
  }
}
</script>

<style lang="scss" scoped>
  .yt-time-quarter{
    position: relative;
    width: 220px;
  }
</style>
